import React, { Component, Fragment } from "react";
import { Carousel } from "antd-mobile";
// import axios from "axios";
import axios, { BaseURL } from "../../../utils/request";
import nav1 from "../../../assets/images/nav-1.png";
import nav2 from "../../../assets/images/nav-2.png";
import nav3 from "../../../assets/images/nav-3.png";
import nav4 from "../../../assets/images/nav-4.png";
import IndexCss from "./index.module.scss";
import CityInput from "../../../components/CityInput";
/* 
1 Carousel 组件本身存在bug 
  1 假如 要显示的数据是 静态  在创建 轮播图组件的 时候 数据已经存在的话  正常显示 
  2 解决 发送异步请求的  this.state.swiperList.length && <Carousel
 */
class index extends Component {
  state = {
    swiperList: [],
    // // 先写死176 为了解决轮播图另外的一个bug  不能够自动根据图片的内容高度来撑开自己 

    // 导航数组
    navs: [
      { id: 0, imgSrc: nav1, text: "整租" },
      { id: 1, imgSrc: nav2, text: "合租" },
      { id: 2, imgSrc: nav3, text: "地图找房" },
      { id: 3, imgSrc: nav4, text: "去出租" }
    ],
    // 租房 数据
    rentings: [],
    // 资讯
    news: []
  };
  componentDidMount() {
   
    this.getSwiperList();
    this.getRentings();
    this.getNews();
  }

  // 获取轮播图的数据
  getSwiperList = () => {
    axios.get("/home/swiper").then(res => {
      this.setState({ swiperList: res.data.body });
    });
  };

  // 获取租房的数据
  getRentings() {
    axios.get("/home/groups").then(res => {
      this.setState({ rentings: res.data.body });
    });
  }
  // 获取资讯的数据
  getNews() {
    axios.get("/home/news").then(res => {
      this.setState({ news: res.data.body });
    });
  }

  render() {
    // return <></>;
    return (
      <div>

        {/*  轮播图 开始 */}
        <div className={IndexCss.index_swiper}>
          <div className={IndexCss.city_input_row}> <CityInput ></CityInput></div>
          {this.state.swiperList.length && (
            <Carousel autoplay infinite>
              {this.state.swiperList.map(val => (
                <a
                  key={val.id}
                  href="http://www.alipay.com"
                  style={{
                    display: "inline-block",
                    width: "100%"
                  }}
                >
                  <img
                    src={BaseURL + val.imgSrc}
                    alt=""
                  />
                </a>
              ))}
            </Carousel>
          )}
        </div>
        {/*  轮播图 结束 */}

        {/* 首页导航 开始 */}
        <div className={IndexCss.index_nav}>
          {this.state.navs.map(v => (
            <div className={IndexCss.nav_item} key={v.id}>
              <img src={v.imgSrc} alt="" />
              <p>{v.text}</p>
            </div>
          ))}
        </div>
        {/* 首页导航 结束 */}

        {/* 租房小组 开始 */}
        <div className={IndexCss.renttings}>
          <div className={IndexCss.renttings_title}>
            <span>租房小组</span>
            <a href="#">更多</a>
          </div>

          <div className={IndexCss.renttings_content}>
            {this.state.rentings.map(v => (
              <div className={IndexCss.renttings_item} key={v.id}>
                <div className={IndexCss.renttings_item_info}>
                  <div className={IndexCss.renttings_item_title}>{v.title}</div>
                  <div className={IndexCss.renttings_item_desc}>{v.desc}</div>
                </div>
                <div className={IndexCss.renttings_item_img}>
                  <img src={BaseURL + v.imgSrc} alt="" />
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* 租房小组 结束 */}

        {/* 最新资讯 开始 */}
        <div className={IndexCss.news}>
          <div className={IndexCss.news_title}>最新资讯</div>
          <div className={IndexCss.news_content}>
            {this.state.news.map(v => (
              <div key={v.id} className={IndexCss.news_item}>
                <div className={IndexCss.news_img}>
                  <img src={BaseURL + v.imgSrc} alt="" />
                </div>
                <div className={IndexCss.news_info}>
                  <div className={IndexCss.news_main}>{v.title}</div>
                  <div className={IndexCss.news_desc}>
                    <span className={IndexCss.news_from}>{v.from}</span>
                    <span className={IndexCss.news_date}>{v.date}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* 最新资讯 结束 */}
      </div>
    );
  }
}
export default index;
